import { SvgIcon } from "@/components/icon";
import { CircleLoading } from "@/components/loading";
import { Suspense, lazy } from "react";
import { Navigate, Outlet } from "react-router-dom";
import type { AppRouteObject } from "#/router";

const NotificationListPage = lazy(() =>
	import("@/pages/notifications").then((module) => ({ default: module.default })),
);

const notifications: AppRouteObject = {
	order: 3,
	path: "notifications",
	element: (
		<Suspense fallback={<CircleLoading />}>
			<Outlet />
		</Suspense>
	),
	meta: {
		label: "变动通知",
		icon: (
			<SvgIcon
				icon="solar:bell-bold"
				className="ant-menu-item-icon"
				size="24"
			/>
		),
		key: "/notifications",
	},
	children: [
		{
			index: true,
			element: <NotificationListPage />,
		},
	],
};

export default notifications;
